<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./prop-types.js"></script>

<script type="text/babel">
// 创建
class Demo extends React.Component {
  // 展示左侧组件内的字符
  showData = ()=>{
    // const ipt = document.getElementById("aaaa")
    // alert(ipt.value)
    // console.log(this)
    alert(this.refs.aaaa.value)
  }

  showData1 = ()=>{
    // const ipt = document.getElementById("aaaa")
    // alert(ipt.value)
    // console.log(this)
    alert(this.refs.bbbb.value)
  }

  render(){
    // 字符串ref可能存在效率上的问题，后期版本不推荐使用
    return (
      <div>
        <input type="text" ref="aaaa" placeholder="点击按钮提示数据"/>
        <button ref="button100" onClick={this.showData}>点我提示左侧数据</button>
        <input type="text" ref="bbbb" onBlur={this.showData1} placeholder="失去焦点提示数据"/>
        </div>
    )
  }
}

ReactDOM.render(<Demo />, document.getElementById('root'))
</script>
</html>
